import React, { FC, useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { Subscription } from 'rxjs';
import { View, Text, Image, Button } from '@tarojs/components'
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/button.scss" // 按需引入 
import { useAuthFacade } from '@/hooks/useAuthFacade';
import { useRoomDataFacade } from '@/hooks/useRoomDataFacade';
import { AnchorlatestRsp, LiveParams } from '@/models/response/userRsp';
import { formatTimes } from '@/utils';
import './index.scss'

export const UserLiveTrends: FC = () => {

  const [authFacade, loginStatus, userId, , , userInfo] = useAuthFacade();
  const [startedList, setStartedList] = useState([] as LiveParams[]) //直播中的数据
  const [noStartedList, setNoStartedList] = useState([] as LiveParams[]) //直播未开始的数据
  const [endedList, setEndedList] = useState([] as LiveParams[]) //直播已结束的数据

  const [cur, setcur] = useState(0)
  const handleClick = (value) => {
    setcur(value)
  }

  const goToRoom = (roomId: string) => {
    Taro.navigateTo({
      url: `/pages/liveRoom/LiveDetails/index?roomId=${roomId}`
    })
  }
  useEffect(() => {
    if (userId === '') return
    //注册并执行所有rxjs流
    const subscriptions: Subscription[] = [
      authFacade.getLatestShow('', userId)
        .subscribe(
          (res: AnchorlatestRsp[]) => {
            res.map(item => {
              if (item.status == 'started') {
                const data = item.rooms.slice(0, 1)
                setStartedList(data)
              } else if (item.status == 'notStarted') {
                const data = item.rooms
                setNoStartedList(data)
              } else {
                const data = item.rooms
                setEndedList(data)
              }
            })
          }
        )
    ];
    //页面销毁时也销毁所有订阅，防止内存泄漏
    return () => { subscriptions.map(sub => sub.unsubscribe()) };
  }, [userId]);

  const tabList = [{ title: '直播中' }, { title: '未开播' }, { title: '已结束' }]
  return (
    <View className='index'>
      {/* 导航栏标签 */}
      <AtTabs current={cur} tabList={tabList} onClick={handleClick.bind(this)}>
        <AtTabsPane current={cur} index={0} >
          <View className='main'>
            {
              startedList && startedList.length > 0 && startedList.map((item, index) => (
                <View className='content1' key={index} onClick={() => goToRoom(item.roomId)}>
                  <View className='left'>
                    <View className='leftImg'>
                      <Image src={item.picUrl} className='left_img'></Image>
                      <View className='status'>
                        <Text> 直播中</Text>
                      </View>
                      <View className='play'>
                        <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/play.png' className='play_img'></Image>
                      </View>
                    </View>
                    <View className=' boxShadow'></View>
                  </View>
                  <View className='right'>
                    <View className='title'>
                      <Text>{item.roomName}</Text>
                    </View>
                    <View className='time'>
                      <Text>正在直播中</Text>
                    </View>
                  </View>
                </View>
              ))
            }
            {!startedList || startedList.length === 0 && (
              <View className='background'>
                <View className='img'><Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/historyBJ.png' className='bj-img'></Image></View>
                <View className='text'>
                  <Text>暂无开始的直播</Text>
                </View>
              </View>
            )}
          </View>
        </AtTabsPane>
        <AtTabsPane current={cur} index={1}>
          <View className='main'>
            {
              noStartedList && noStartedList.length > 0 && noStartedList.map((item, index) => (
                <View className='content2' key={index} onClick={() => goToRoom(item.roomId)}>
                  <View className='left'>
                    <View className='leftImg'>
                      <Image src={item.picUrl} className='left_img'></Image>
                      <View className='status'>
                        <Text> 待开始</Text>
                      </View>
                      <View className='play'>
                        <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/play.png' className='play_img'></Image>
                      </View>
                    </View>
                    <View className=' boxShadow'></View>
                  </View>
                  <View className='right'>
                    <View className='title'>
                      <Text>{item.roomName}</Text>
                    </View>
                    <View className='time'>开始时间： {formatTimes(new Date(item.startTime))}</View>
                  </View>
                </View>
              ))
            }
            {!noStartedList || noStartedList.length === 0 && (
              <View className='background'>
                <View className='img'><Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/historyBJ.png' className='bj-img'></Image></View>
                <View className='text'>
                  <Text>暂无待开始的直播</Text>
                </View>
              </View>
            )}
          </View>
        </AtTabsPane>
        <AtTabsPane current={cur} index={2}>
          <View className='main'>
            {
              endedList && endedList.length > 0 && endedList.map((item, index) => (
                <View className='content3' key={index} onClick={() => goToRoom(item.roomId)}>
                  <View className='left'>
                    <View className='leftImg'>
                      <Image src={item.picUrl} className='left_img'></Image>
                      <View className='status'>
                        <Text> 看回放</Text>
                      </View>
                      <View className='play'>
                        <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/play.png' className='play_img'></Image>
                      </View>
                    </View>
                    <View className=' boxShadow'></View>
                  </View>
                  <View className='right'>
                    <View className='title'>
                      <Text>{item.roomName}</Text>
                    </View>
                    <View className='time'>
                      <Text>结束时间：{formatTimes(new Date(item.endTime))}</Text>
                    </View>
                  </View>
                </View>
              ))
            } 
            {!endedList || endedList.length === 0 && (
              <View className='background'>
                <View className='img'><Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/historyBJ.png' className='bj-img'></Image></View>
                <View className='text'>
                  <Text>暂无已结束的直播</Text>
                </View>
              </View>
            )}
          </View>
        </AtTabsPane>
      </AtTabs>
      {/* 主体内容 */}
    </View>
  )
}



export default UserLiveTrends